<script setup lang="ts" name="HomePage">
import { onMounted, onUnmounted, ref } from 'vue';
import {
    useIntersectionObserver,
    UseIntersectionObserverReturn,
    useWindowScroll,
} from '@vueuse/core';
import { Autoplay, EffectCreative, Navigation } from 'swiper/modules';
import { Swiper as SwiperClass } from 'swiper/types';
import { Swiper, SwiperSlide } from 'swiper/vue';

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

import 'swiper/css';
import 'swiper/css/effect-creative';
import 'swiper/css/navigation';

import Menu from '@/components/menu/index.vue';
import PageFooter from '@/components/PageFooter.vue';

import type { MenuOption } from '@/components/menu/MenuItem.vue';
import { getAssetsFile } from '@/utils';

const menus = <MenuOption[]>[
    { label: '三维画册', value: 'section-1' },
    { label: '功能演示', value: 'section-2' },
    { label: '画册优势', value: 'section-3' },
    { label: '基本功能', value: 'section-4' },
    { label: '智能化', value: 'section-5' },
    { label: '扩展功能', value: 'section-6' },
    { label: '免费注册', value: 'section-7' },
];

const { y } = useWindowScroll({
    behavior: 'smooth',
});

const selectedMenu = ref(menus.at(0));

function handleMenuClick(menu: MenuOption) {
    const target = document.querySelector(`#${menu?.value}`);
    if (target === null) return;

    const rect = target.getBoundingClientRect();
    const top = (rect.top ?? 0) + window.scrollY;
    const navHeight = ['section-5', 'section-6'].includes(menu!.value)
        ? 152
        : 60;
    y.value = top > 0 ? top - navHeight : top;

    // Native implementation
    // window.scrollTo({
    //     top: top > 0 ? top - 156 : top,
    //     behavior: 'smooth',
    // });

    // target?.scrollIntoView({
    //     behavior: 'smooth',
    // });
}

const navRef = ref<HTMLElement | null>(null);
let navObserver: UseIntersectionObserverReturn | null = null;

function observeNavbar() {
    if (navRef.value == null) return;

    const scrollWatcher = document.createElement('div');
    scrollWatcher.setAttribute('data-scroll-watcher', '');

    navRef.value?.before(scrollWatcher);
    navObserver = useIntersectionObserver(
        scrollWatcher,
        ([{ isIntersecting }]) => {
            navRef.value?.classList.toggle('!py-4', !isIntersecting);
            navRef.value?.classList.toggle('!text-xl', !isIntersecting);
            navRef.value?.classList.toggle('!font-bold', !isIntersecting);
            navRef.value?.classList.toggle(
                '!backdrop-blur-sm',
                !isIntersecting,
            );
            navRef.value?.classList.toggle('!bg-white/50', !isIntersecting);
            navRef.value?.classList.toggle('!shadow-lg', !isIntersecting);
            navRef.value?.classList.toggle(
                '!shadow-slate-200/40',
                !isIntersecting,
            );
        },
    );

    // Native implementation
    // const navObserver = new IntersectionObserver(entries => {
    //     navRef.value?.classList.toggle('!py-4', !entries[0].isIntersecting);
    //     navRef.value?.classList.toggle('!text-xl', !entries[0].isIntersecting);
    //     navRef.value?.classList.toggle(
    //         '!font-bold',
    //         !entries[0].isIntersecting,
    //     );
    //     navRef.value?.classList.toggle(
    //         '!backdrop-blur-sm',
    //         !entries[0].isIntersecting,
    //     );
    //     navRef.value?.classList.toggle(
    //         '!bg-white/50',
    //         !entries[0].isIntersecting,
    //     );
    // });
    // navObserver.observe(scrollWatcher);
}

onMounted(() => {
    observeNavbar();
});

onUnmounted(() => {
    navObserver?.stop();
});

let sectionObserver: UseIntersectionObserverReturn | null = null;

function observeSections() {
    const sections = document.querySelectorAll('section');
    if (!sections.length) return;

    sectionObserver = useIntersectionObserver(
        [...sections],
        ([{ isIntersecting, target }]) => {
            if (!isIntersecting) return;

            const id = target.getAttribute('id');
            selectedMenu.value = menus.find(item => item.value === id);
        },
        {
            threshold: 0.3,
        },
    );
}

onMounted(() => {
    observeSections();
});

onUnmounted(() => {
    sectionObserver?.stop();
});

const basicsSwiperRef = ref<SwiperClass | null>(null);

const basicsSwiperActive = ref(0);

function setBasicsSwiper(swiper: SwiperClass) {
    basicsSwiperRef.value = swiper;
    basicsSwiperActive.value = swiper.activeIndex;
}

function handleBasicsChange(index: number) {
    if (
        basicsSwiperRef.value === null ||
        basicsSwiperRef.value?.realIndex === index
    )
        return;
    basicsSwiperRef.value?.slideTo(index);
}

function handleBasicsSwiperChange({ activeIndex }: SwiperClass) {
    basicsSwiperActive.value = activeIndex;
}

const intelligentSwiperRef = ref<SwiperClass | null>(null);

const intelligentSwiperActive = ref(0);

function setIntelligentSwiper(swiper: SwiperClass) {
    intelligentSwiperRef.value = swiper;
    intelligentSwiperActive.value = swiper.activeIndex;
}

function handleIntelligentChange(index: number) {
    if (
        intelligentSwiperRef.value === null ||
        intelligentSwiperRef.value?.realIndex === index
    )
        return;
    intelligentSwiperRef.value?.slideTo(index);
}

function handleIntelligentSwiperChange({ activeIndex }: SwiperClass) {
    intelligentSwiperActive.value = activeIndex;
}

onMounted(() => {
    const section6 = document.querySelectorAll('#section-6 ul li');
    if (![...section6].length) return;

    gsap.fromTo(
        [...section6],
        {
            scale: 0,
            opacity: 0,
        },
        {
            scale: 1,
            opacity: 1,
            duration: 3,
            scrollTrigger: {
                trigger: section6,
                // start: 4800,
                // end: 'bottom top',
                start: '-=1000',
                end: '+=500',
                scrub: true,
                // pin: true,
            },
        },
    );
});
</script>

<template>
    <div class="home-page">
        <nav
            ref="navRef"
            class="fixed inset-x-0 w-full px-[52px] py-6 text-3xl bg-white z-[9998] ease-linear duration-150"
        >
            <Menu
                v-model="selectedMenu"
                :options="menus"
                @onClick="handleMenuClick"
            />
        </nav>
        <div class="flex flex-col">
            <section
                id="section-1"
                class="bg-[url('@/assets/images/illustrations/illustrations_01.svg')] bg-no-repeat bg-contain"
            >
                <div class="mt-44 ms-[28.5rem] w-[36.5rem]">
                    <h1
                        class="text-[2.5rem] leading-[2.875rem] font-bold text-slate-950"
                    >
                        Haddin鼎盛邦三维电子画册
                    </h1>
                    <p class="mt-6 text-[0.9375rem] tracking-[0.0625rem]">
                        鼎盛邦三维电子画册(以下简称”电子画册”)是一个360度全景车内饰DIY设计平台,是一种数字化的新媒体,三维模型利用VR
                        3D建模、虚拟现实等技术,通过数字仿真技术,完成车辆及内饰的1:1还原。用户可以在平台上完成汽车内饰的个性化设计。通过360度全景展示技术,用户可以全方位地查看汽车内饰的每一个细节,并进行自由搭配和调整。这个平台通常提供多种内饰风格、材料、颜色和配件供用户选择,用户可以根据自己的喜好和需求进行个性化定制。设计完成后,用户可以将设计作品进行分享和展示,或者直接在平台上购买定制的汽车内饰产品。通过360°全景旋转,全方位查看车内饰的设计效果,做到车主所见及所得的真实感。
                    </p>
                    <span
                        class="block mt-10 px-16 py-4 w-fit text-xl leading-6 text-white rounded-[3.25rem] bg-gradient-to-r from-[#6CF8D5] to-[#34C666] cursor-pointer"
                        @click="
                            () =>
                                handleMenuClick({
                                    label: '免费注册',
                                    value: 'section-7',
                                })
                        "
                    >
                        立刻体验
                    </span>
                </div>
                <div class="mt-72 mb-18">
                    <img
                        class="block mx-auto object-contain"
                        src="@/assets/images/illustrations/illustrations_02.svg"
                        alt=""
                    />
                </div>
            </section>

            <section
                id="section-2"
                class="py-24"
            >
                <h4 class="leading-7 text-2xl text-center text-slate-950">
                    高清画质,高还原度,真彩无损
                </h4>
                <video
                    class="mt-8 mx-auto w-[75rem] h-[42.75rem]"
                    src="https://tiny-player.vercel.app/movie.mp4"
                    controls
                    autoplay="true"
                    muted="true"
                ></video>
            </section>

            <section id="section-3">
                <div class="flex items-center justify-center gap-x-32">
                    <div
                        class="flex flex-col justify-center gap-y-4 w-96 h-96 bg-[url('@/assets/images/illustrations/illustrations_03.svg')] bg-no-repeat"
                    >
                        <h6
                            class="text-center leading-7 text-2xl text-slate-950"
                        >
                            实物画册
                        </h6>
                        <ul
                            class="flex flex-col items-center gap-y-2 text-gray-600"
                        >
                            <li>
                                <span class="leading-6 font-medium">
                                    印刷成本高
                                </span>
                            </li>
                            <li>
                                <span class="leading-6 font-medium">
                                    地摊难度大
                                </span>
                            </li>
                            <li>
                                <span class="leading-6 font-medium">
                                    更新周期长
                                </span>
                            </li>
                        </ul>
                    </div>
                    <div
                        class="flex items-center justify-center w-44 h-44 text-2xl leading-7 text-slate-950 bg-gradient-to-tr from-[#FFFFFF] to-[#EDF4FC] rotate-45"
                    >
                        <span class="-rotate-45 self-center">画册演变史</span>
                    </div>
                    <div
                        class="relative w-96 h-96 bg-[url('@/assets/images/illustrations/illustrations_04.svg')] bg-no-repeat"
                    >
                        <div
                            class="flex flex-col justify-center gap-y-4 absolute inset-y-0 left-[10.5rem]"
                        >
                            <h6 class="text-center text-2xl text-slate-950">
                                电子画册
                            </h6>
                            <ul
                                class="flex flex-col items-center gap-y-2 text-gray-600"
                            >
                                <li>
                                    <span class="leading-6 font-medium">
                                        传播速度极快
                                    </span>
                                </li>
                                <li>
                                    <span class="leading-6 font-medium">
                                        随时随地更新
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div
                    class="mx-auto w-[30.75rem] h-[28rem] pt-16 px-36 bg-[url('@/assets/images/illustrations/illustrations_05.svg')] bg-no-repeat bg-contain"
                >
                    <h6 class="text-center text-4xl text-slate-950">
                        三维画册
                    </h6>
                    <img
                        class="block mt-6 mx-auto object-contain"
                        src="@/assets/icons/pad.svg"
                        alt=""
                    />
                    <span class="block mt-4 text-center text-2xl text-slate-950"
                        >扩展功能智慧化</span
                    >
                    <p class="mt-4 text-center text-sm text-gray-600">
                        这些扩展功能能够进一步提升平台的用户体验和实用性,满足用户的多样化需求,提高用户的满意度和忠诚度。
                    </p>
                </div>
                <div class="mt-14 mb-24 px-72">
                    <div class="relative px-8">
                        <Swiper
                            class="w-full h-[32rem]"
                            :slidesPerView="5"
                            :spaceBetween="5"
                            :autoplay="{
                                delay: 5000,
                                disableOnInteraction: false,
                            }"
                            loop
                            :navigation="{
                                nextEl: '.swiper-next',
                                prevEl: '.swiper-prev',
                            }"
                            :modules="[Autoplay, Navigation]"
                        >
                            <SwiperSlide
                                class="!h-[32.375rem] bg-[#F2F4F8] relative before:absolute before:inset-y-0 before:my-auto before:w-1 before:hover:bg-[#30C05D]"
                            >
                                <div
                                    class="h-full overflow-hidden bg-[url('@/assets/images/illustrations/swiper/illustration_01.svg')] bg-no-repeat bg-cover"
                                >
                                    <div class="mx-9">
                                        <span
                                            class="block mt-16 text-2xl leading-7 font-semibold"
                                            >交互性</span
                                        >
                                        <p
                                            class="mt-5 text-base font-medium lg:line-clamp-[10] md:line-clamp-[6] sm:line-clamp-4"
                                        >
                                            电子画册具有高度的互动性,使用者可以通过触摸屏幕或使用鼠标等进行翻页、放大、缩小、滑动、旋转等操作360°全景方便车主更加直观的查看内饰设计的每一个细节点。同时还可以通过动画、视频等方式展示内容,让展示方式更加生动有趣。
                                        </p>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide
                                class="!h-[32.375rem] bg-[#F2F4F8] relative before:absolute before:inset-y-0 before:my-auto before:w-1 before:hover:bg-[#30C05D]"
                            >
                                <div
                                    class="h-full overflow-hidden bg-[url('@/assets/images/illustrations/swiper/illustration_02.svg')] bg-no-repeat bg-cover"
                                >
                                    <div class="mx-9">
                                        <span
                                            class="block mt-16 text-2xl leading-7 font-semibold"
                                            >可定制性</span
                                        >
                                        <p
                                            class="mt-5 text-base font-medium lg:line-clamp-[10] md:line-clamp-[6] sm:line-clamp-4"
                                        >
                                            电子画册可以根据不同的需求进行定制,例如新增内饰定制样式、新增电子产品、调整页面布局、字体、颜色等,还可以添加个性化的元素,如背景音乐、视频等。这使得电子画册在展示内容、风格和形式上更加灵活多样。
                                        </p>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide
                                class="!h-[32.375rem] bg-[#F2F4F8] relative before:absolute before:inset-y-0 before:my-auto before:w-1 before:hover:bg-[#30C05D]"
                            >
                                <div
                                    class="h-full overflow-hidden bg-[url('@/assets/images/illustrations/swiper/illustration_03.svg')] bg-no-repeat bg-cover"
                                >
                                    <div class="mx-9">
                                        <span
                                            class="block mt-16 text-2xl leading-7 font-semibold"
                                            >专属性</span
                                        >
                                        <p
                                            class="mt-5 text-base font-medium lg:line-clamp-[10] md:line-clamp-[6] sm:line-clamp-4"
                                        >
                                            每个加盟厂家或代理商均可上传自己在用的材料、花型、车标、丝圈材料等,保证到店客户线上定制,线下到店生产安装的需求。
                                        </p>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide
                                class="!h-[32.375rem] bg-[#F2F4F8] relative before:absolute before:inset-y-0 before:my-auto before:w-1 before:hover:bg-[#30C05D]"
                            >
                                <div
                                    class="h-full overflow-hidden bg-[url('@/assets/images/illustrations/swiper/illustration_04.svg')] bg-no-repeat bg-cover"
                                >
                                    <div class="mx-9">
                                        <span
                                            class="block mt-16 text-2xl leading-7 font-semibold"
                                            >易于更新和修改</span
                                        >
                                        <p
                                            class="mt-5 text-base font-medium lg:line-clamp-[10] md:line-clamp-[6] sm:line-clamp-4"
                                        >
                                            电子画册的编辑和更新非常方便快捷,可以随时进行修改和更新,而且更新后的内容可以立即显示在屏幕上,无需重新印刷,节省了大量的时间和成本这避免了传统纸质画册需要重新印刷和装订的麻烦和成本。
                                        </p>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide
                                class="!h-[32.375rem] bg-[#F2F4F8] relative before:absolute before:inset-y-0 before:my-auto before:w-1 before:hover:bg-[#30C05D]"
                            >
                                <div
                                    class="h-full overflow-hidden bg-[url('@/assets/images/illustrations/swiper/illustration_05.svg')] bg-no-repeat bg-cover"
                                >
                                    <div class="mx-9">
                                        <span
                                            class="block mt-16 text-2xl leading-7 font-semibold"
                                            >多媒体展示</span
                                        >
                                        <p
                                            class="mt-5 text-base font-medium lg:line-clamp-[10] md:line-clamp-[6] sm:line-clamp-4"
                                        >
                                            三维模型电子画册可以包含图片、文字、音频、视频等多种媒体形式,使内容更加丰富多样,让展示更加生动逼真。
                                        </p>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide
                                class="!h-[32.375rem] bg-[#F2F4F8] relative before:absolute before:inset-y-0 before:my-auto before:w-1 before:hover:bg-[#30C05D]"
                            >
                                <div
                                    class="h-full overflow-hidden bg-[url('@/assets/images/illustrations/swiper/illustration_01.svg')] bg-no-repeat bg-cover"
                                >
                                    <div class="mx-9">
                                        <span
                                            class="block mt-16 text-2xl leading-7 font-semibold"
                                            >交互性</span
                                        >
                                        <p
                                            class="mt-5 text-base font-medium lg:line-clamp-[10] md:line-clamp-[6] sm:line-clamp-4"
                                        >
                                            电子画册具有高度的互动性,使用者可以通过触摸屏幕或使用鼠标等进行翻页、放大、缩小、滑动、旋转等操作360°全景方便车主更加直观的查看内饰设计的每一个细节点。同时还可以通过动画、视频等方式展示内容,让展示方式更加生动有趣。
                                        </p>
                                    </div>
                                </div>
                            </SwiperSlide>
                        </Swiper>
                        <span
                            class="swiper-prev absolute inset-y-0 -left-14 my-auto w-12 h-24 cursor-pointer z-[1] before:block before:absolute before:top-0.5 before:w-5 before:h-12 before:bg-[#D8E0EA] before:-skew-y-[24deg] before:rotate-[24deg] after:block after:absolute after:bottom-0.5 after:w-5 after:h-12 after:bg-[#D8E0EA] after:skew-y-[24deg] after:-rotate-[24deg]"
                        ></span>
                        <span
                            class="swiper-next absolute inset-y-0 -right-14 my-auto w-8 h-24 cursor-pointer z-[1] before:block before:absolute before:top-0.5 before:w-5 before:h-12 before:bg-[#D8E0EA] before:skew-y-[24deg] before:-rotate-[24deg] after:block after:absolute after:bottom-0.5 after:w-5 after:h-12 after:bg-[#D8E0EA] after:-skew-y-[24deg] after:rotate-[24deg]"
                        ></span>
                    </div>
                </div>
            </section>

            <section
                id="section-4"
                class="pt-10 pb-24 bg-slate-50 bg-[url(@/assets/images/illustrations/illustrations_18.png)] bg-no-repeat bg-contain"
            >
                <div class="flex flex-col items-center justify-center gap-y-3">
                    <span class="text-2xl leading-7">
                        虚拟现实+互联网,让传统行业搭载上数字营销的翅膀
                    </span>
                    <span class="text-2xl leading-7">
                        从车主到销售方到生产工厂,线上一站式完成
                    </span>
                </div>
                <div class="flex flex-col mt-6">
                    <ul
                        class="flex justify-between mx-auto pb-2 w-2/5 border-b-2 border-solid border-slate-200"
                    >
                        <template
                            v-for="(item, index) in [
                                {
                                    label: '车主端',
                                    icon: 'icons/icon_01.svg',
                                },
                                {
                                    label: '代理商端',
                                    icon: 'icons/icon_02.svg',
                                },
                                {
                                    label: '生产工厂端',
                                    icon: 'icons/icon_03.svg',
                                },
                            ]"
                        >
                            <li
                                class="cursor-pointer"
                                :class="{
                                    'text-[#30C05D]':
                                        basicsSwiperActive === index,
                                }"
                                @mouseenter="() => handleBasicsChange(index)"
                            >
                                <img
                                    :src="getAssetsFile(item.icon)"
                                    alt="icon"
                                />
                                <span class="leading-5">{{ item.label }}</span>
                            </li>
                        </template>
                    </ul>
                    <Swiper
                        class="mt-[4.6875rem] w-2/4"
                        @swiper="setBasicsSwiper"
                        :autoplay="{
                            delay: 5000,
                            disableOnInteraction: false,
                        }"
                        :grabCursor="true"
                        :effect="'creative'"
                        :creativeEffect="{
                            prev: {
                                shadow: true,
                                translate: [0, 0, -800],
                                rotate: [180, 0, 0],
                            },
                            next: {
                                shadow: true,
                                translate: [0, 0, -800],
                                rotate: [-180, 0, 0],
                            },
                        }"
                        @slide-change="handleBasicsSwiperChange"
                        :modules="[Autoplay, EffectCreative]"
                    >
                        <template
                            v-for="(_, index) in 3"
                            :key="index"
                        >
                            <SwiperSlide class="rounded-md">
                                <div class="flex justify-center">
                                    <span class="w-[27rem] h-[21rem]">
                                        <img
                                            class="h-full"
                                            :src="`https://picsum.photos/432/336?random${index}?grayscale`"
                                            alt=""
                                        />
                                    </span>
                                    <div
                                        class="flex flex-col gap-6 px-16 py-9 bg-white"
                                    >
                                        <div class="flex flex-col gap-2">
                                            <strong class="leading-7 text-2xl">
                                                车主端
                                            </strong>
                                            <small
                                                class="leading-4 text-sm text-slate-950"
                                            >
                                                像装修房了一样装饰自己的爱车
                                            </small>
                                        </div>
                                        <ul
                                            class="flex flex-col gap-4 leading-4 text-sm text-slate-950 -translate-x-3"
                                        >
                                            <li
                                                class="flex items-center gap-x-2"
                                            >
                                                <i
                                                    class="w-9 h-6 bg-[url('@/assets/icons/arrow.svg')] bg-no-repeat bg-contain"
                                                ></i>
                                                <span
                                                    >无需安装任何程序,微信小程序快速入口</span
                                                >
                                            </li>
                                            <li
                                                class="flex items-center gap-x-2"
                                            >
                                                <i
                                                    class="w-9 h-6 bg-[url('@/assets/icons/arrow.svg')] bg-no-repeat bg-contain"
                                                ></i>
                                                <span
                                                    >手机端、pad端、电脑端等适配多种终端,让车主选择更方便</span
                                                >
                                            </li>
                                            <li
                                                class="flex items-center gap-x-2"
                                            >
                                                <i
                                                    class="w-9 h-6 bg-[url('@/assets/icons/arrow.svg')] bg-no-repeat bg-contain"
                                                ></i>
                                                <span
                                                    >选择车型,搭配内饰、座椅、湖垫样式扶速实现整体车居私人定制场是</span
                                                >
                                            </li>
                                        </ul>
                                        <span
                                            class="block px-10 py-2 w-fit text-base leading-5 text-white rounded-[3.25rem] bg-gradient-to-r from-[#6CF8D5] to-[#34C666] cursor-pointer"
                                            >立刻体验</span
                                        >
                                    </div>
                                </div>
                            </SwiperSlide>
                        </template>
                        <div
                            class="flex items-center justify-center relative -top-8"
                        >
                            <span class="w-[60.75rem] h-[35.5rem]">
                                <img
                                    class="block"
                                    src="@/assets/images/illustrations/Group_155.svg"
                                    alt=""
                                />
                            </span>
                            <!-- <span
                                            class="block w-[29.5rem] h-[17rem] rounded-[50%] bg-gradient-to-b from-white to-slate-300/15"
                                        >
                                            <i
                                                class="block w-9 h-6 bg-[url('@/assets/icons/imac.svg')] bg-no-repeat bg-contain"
                                            ></i>
                                        </span> -->
                        </div>
                    </Swiper>
                </div>
            </section>

            <section
                id="section-5"
                class="pb-12"
            >
                <div
                    class="flex mx-auto w-4/6 p-1 relative -top-6 rounded-md bg-white shadow-lg shadow-slate-200/80"
                >
                    <ul class="flex flex-col gap-y-1 px-6 py-9">
                        <template
                            v-for="(item, index) in [
                                'AR/VR体验',
                                '用户评价与反馈系统',
                                '智能推荐系统',
                                '定制化配件选择',
                                '教程与帮助文档',
                                '合作伙伴推广',
                                '社交媒体分享与链接',
                                '积分与奖励系统',
                                '在线客服支持',
                                '数据可视化与报表',
                            ]"
                            :key="item"
                        >
                            <li
                                class="w-48 h-14"
                                @mouseenter="
                                    () => handleIntelligentChange(index)
                                "
                            >
                                <div
                                    class="text-sm leading-[3.5rem] font-bold h-full bg-[url('@/assets/images/Rectangle_arrow.svg')] bg-no-repeat bg-cover cursor-pointer"
                                    :class="{
                                        'bg-none':
                                            intelligentSwiperActive !== index,
                                    }"
                                >
                                    <span class="ms-6">{{ item }}</span>
                                </div>
                            </li>
                        </template>
                    </ul>
                    <Swiper
                        class="bg-slate-50 rounded"
                        @swiper="setIntelligentSwiper"
                        :grabCursor="true"
                        :effect="'creative'"
                        :creativeEffect="{
                            prev: {
                                shadow: true,
                                translate: [0, 0, -400],
                            },
                            next: {
                                translate: ['100%', 0, 0],
                            },
                        }"
                        @slide-change="handleIntelligentSwiperChange"
                        :modules="[Autoplay, EffectCreative]"
                    >
                        <template
                            v-for="(_, index) in 10"
                            :key="index"
                        >
                            <SwiperSlide>
                                <div
                                    class="flex flex-col items-center gap-y-16 py-8 bg-slate-50"
                                >
                                    <div class="space-y-6 text-center">
                                        <h4
                                            class="leading-7 text-2xl font-semibold"
                                        >
                                            智慧化功能
                                        </h4>
                                        <span class="block leading-4 text-sm">
                                            这些扩展功能能够进一步提升平台的用户体验和实用性,满足用户的多样化需求,提高用户的满意度和忠诚度。
                                        </span>
                                    </div>
                                    <div class="w-2/3 space-y-12">
                                        <img
                                            :src="`https://picsum.photos/560/335?random${index}?grayscale`"
                                            alt=""
                                        />
                                        <p class="text-sm text-gray-500">
                                            利用增强现实(AR)和虚拟现实(VR)技术,用户可以在平台上进行沉浸式的内饰体验。通过VR眼镜或手机AR应用,用户可以更加真实地感受设计完成后的车内效果。
                                        </p>
                                    </div>
                                </div>
                            </SwiperSlide>
                        </template>
                    </Swiper>
                </div>
            </section>

            <section
                id="section-6"
                class="bg-slate-100"
            >
                <div class="flex flex-col items-center mx-auto my-20 w-5/6">
                    <h4 class="text-3xl tracking-widest">扩展功能</h4>
                    <span class="leading-4 text-sm"
                        >这些扩展功能能够进一步提升平台的用户体验和实用性，满足用户的多样化需求，提高用户的满意度和忠诚度。</span
                    >
                    <ul class="grid grid-cols-5 gap-x-4 gap-y-6 mt-20">
                        <li
                            class="p-1 rounded-md bg-white shadow-md shadow-slate-100"
                        >
                            <div
                                class="px-6 py-4 h-full space-y-4 bg-gradient-to-r from-white to-[#E7FFF0] rounded-sm"
                            >
                                <img
                                    src="@/assets/icons/icon_04.svg"
                                    alt=""
                                />
                                <strong
                                    class="block leading-5 font-bold text-slate-950"
                                    >智能化配色方案</strong
                                >
                                <small
                                    class="block leading-5 text-sm text-gray-600"
                                >
                                    平台可以自动推荐或生成与整体设计风格相匹配的配色方案，帮助用户更好地实现个性化的设计。
                                </small>
                            </div>
                        </li>
                        <li
                            class="p-1 rounded-md bg-white shadow-md shadow-slate-100"
                        >
                            <div
                                class="px-6 py-4 h-full space-y-4 bg-gradient-to-r from-[#F4FCF2] to-white rounded-sm"
                            >
                                <img
                                    src="@/assets/icons/icon_05.svg"
                                    alt=""
                                />
                                <strong
                                    class="block leading-5 font-bold text-slate-950"
                                    >材料质感模拟</strong
                                >
                                <small
                                    class="block leading-5 text-sm text-gray-600"
                                >
                                    模拟不同材质的内饰触感和质感，让用户在虚拟环境中感受真实的设计体验。
                                </small>
                            </div>
                        </li>
                        <li
                            class="p-1 rounded-md bg-white shadow-md shadow-slate-100"
                        >
                            <div
                                class="px-6 py-4 h-full space-y-4 bg-gradient-to-r from-[#F4FCF2] to-white rounded-sm"
                            >
                                <img
                                    src="@/assets/icons/icon_06.svg"
                                    alt=""
                                />
                                <strong
                                    class="block leading-5 font-bold text-slate-950"
                                    >预算估算</strong
                                >
                                <small
                                    class="block leading-5 text-sm text-gray-600"
                                >
                                    输入内饰的材质、配件等详细信息，平台自动估算出相应的预算，帮助用户控制成本。
                                </small>
                            </div>
                        </li>
                        <li
                            class="p-1 rounded-md bg-white shadow-md shadow-slate-100"
                        >
                            <div
                                class="px-6 py-4 h-full space-y-4 bg-gradient-to-r from-[#F4FCF2] to-white rounded-sm"
                            >
                                <img
                                    src="@/assets/icons/icon_07.svg"
                                    alt=""
                                />
                                <strong
                                    class="block leading-5 font-bold text-slate-950"
                                    >虚拟试用</strong
                                >
                                <small
                                    class="block leading-5 text-sm text-gray-600"
                                >
                                    虚拟试用，体验设计完成后的效果，有助于更好地做出决策。
                                </small>
                            </div>
                        </li>
                        <li
                            class="p-1 rounded-md bg-white shadow-md shadow-slate-100"
                        >
                            <div
                                class="px-6 py-4 h-full space-y-4 bg-gradient-to-r from-[#F4FCF2] to-white rounded-sm"
                            >
                                <img
                                    src="@/assets/icons/icon_08.svg"
                                    alt=""
                                />
                                <strong
                                    class="block leading-5 font-bold text-slate-950"
                                    >社区互动</strong
                                >
                                <small
                                    class="block leading-5 text-sm text-gray-600"
                                >
                                    设立社区功能，让用户分享自己的设计作品、心得和经验，增加用户之间的互动和交流。
                                </small>
                            </div>
                        </li>
                        <li
                            class="p-1 rounded-md bg-white shadow-md shadow-slate-100"
                        >
                            <div
                                class="px-6 py-4 h-full space-y-4 bg-gradient-to-r from-[#F4FCF2] to-white rounded-sm"
                            >
                                <img
                                    src="@/assets/icons/icon_09.svg"
                                    alt=""
                                />
                                <strong
                                    class="block leading-5 font-bold text-slate-950"
                                    >在线支付与定制下单</strong
                                >
                                <small
                                    class="block leading-5 text-sm text-gray-600"
                                >
                                    用户可以在平台上完成支付并直接下单定制产品，简化购买流程。
                                </small>
                            </div>
                        </li>
                        <li
                            class="p-1 rounded-md bg-white shadow-md shadow-slate-100"
                        >
                            <div
                                class="px-6 py-4 h-full space-y-4 bg-gradient-to-r from-[#F4FCF2] to-white rounded-sm"
                            >
                                <img
                                    src="@/assets/icons/icon_10.svg"
                                    alt=""
                                />
                                <strong
                                    class="block leading-5 font-bold text-slate-950"
                                    >3D打印模型预览</strong
                                >
                                <small
                                    class="block leading-5 text-sm text-gray-600"
                                >
                                    平台可以提供3D打印预览功能,
                                    让用户更直观地了解产品效果。
                                </small>
                            </div>
                        </li>
                        <li
                            class="p-1 rounded-md bg-white shadow-md shadow-slate-100"
                        >
                            <div
                                class="px-6 py-4 h-full space-y-4 bg-gradient-to-r from-[#F4FCF2] to-white rounded-sm"
                            >
                                <img
                                    src="@/assets/icons/icon_11.svg"
                                    alt=""
                                />
                                <strong
                                    class="block leading-5 font-bold text-slate-950"
                                    >专业设计师服务</strong
                                >
                                <small
                                    class="block leading-5 text-sm text-gray-600"
                                >
                                    提供专业的设计师咨询服务，帮助用户解决在设计过程中遇到的问题和困难。
                                </small>
                            </div>
                        </li>
                        <li
                            class="p-1 rounded-md bg-white shadow-md shadow-slate-100"
                        >
                            <div
                                class="px-6 py-4 h-full space-y-4 bg-gradient-to-r from-[#F4FCF2] to-white rounded-sm"
                            >
                                <img
                                    src="@/assets/icons/icon_12.svg"
                                    alt=""
                                />
                                <strong
                                    class="block leading-5 font-bold text-slate-950"
                                    >数据统计与分析</strong
                                >
                                <small
                                    class="block leading-5 text-sm text-gray-600"
                                >
                                    平台可以对用户的行为和喜好进行数据统计和分析，以便更好地优化和改进平台功能和用户体验。
                                </small>
                            </div>
                        </li>
                        <li
                            class="p-1 rounded-md bg-white shadow-md shadow-slate-100"
                        >
                            <div
                                class="px-6 py-4 h-full space-y-4 bg-gradient-to-r from-[#F4FCF2] to-white rounded-sm"
                            >
                                <img
                                    src="@/assets/icons/icon_13.svg"
                                    alt=""
                                />
                                <strong
                                    class="block leading-5 font-bold text-slate-950"
                                    >多终端支持</strong
                                >
                                <small
                                    class="block leading-5 text-sm text-gray-600"
                                >
                                    平台可以支持PC、手机、平板等多种终端设备,
                                    方便用户随时随地进行设计和浏览。
                                </small>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>

            <section
                id="section-7"
                class="bg-[#F7FBFA] bg-[url('@/assets/images/illustrations/illustrations_09.svg')] bg-no-repeat bg-right-bottom"
            >
                <div class="flex mx-auto my-16 w-5/6 space-x-24">
                    <div class="w-[47rem]">
                        <div class="ms-16 mt-4">
                            <h4
                                class="text-[2rem] leading-9 tracking-wider text-slate-950 font-bold"
                            >
                                鼎盛邦营销新方向
                            </h4>
                            <span class="block mt-6 text-sm leading-4 font-bold"
                                >车主私人定制、店铺智能营销、工厂高效生产、客户管理全流程，统统线上全搞定</span
                            >
                        </div>
                        <div class="h-[27.25rem]">
                            <img
                                src="@/assets/images/illustrations/illustrations_08.svg"
                                alt=""
                            />
                        </div>
                        <ul class="flex flex-col gap-y-2 ms-16 mt-9">
                            <li>
                                <strong class="text-sm text-slate-950"
                                    >平面画册</strong
                                >
                                <small class="text-sm text-gray-600">
                                    一键注册|无需按照|专属后台|设置不同系列不同分组全方位展示自己]更新后1秒送达客户
                                </small>
                            </li>
                            <li>
                                <strong class="text-sm text-slate-950"
                                    >三维画册</strong
                                >
                                <small class="text-sm text-gray-600">
                                    三维立体展示|360“旋转看内饰细节]随意搭配私人定制|座椅脚垫整体车居|自主管理材料花型上层垫等
                                </small>
                            </li>
                            <li>
                                <strong class="text-sm text-slate-950"
                                    >客户档案</strong
                                >
                                <small class="text-sm text-gray-600">
                                    系统化管理客户信息|客户二次营销转化|客户统计报表
                                </small>
                            </li>
                            <li>
                                <strong class="text-sm text-slate-950"
                                    >线上商城</strong
                                >
                                <small class="text-sm text-gray-600">
                                    专属线上产品展示厅]专属管理后台|线上+线下让店铺拥有无限展厅
                                </small>
                            </li>
                        </ul>
                    </div>
                    <div
                        class="px-14 pt-14 pb-8 rounded-md bg-white shadow-xl shadow-slate-100"
                    >
                        <h5 class="leading-7 text-2xl text-slate-950 font-bold">
                            预约演示&购买咨询
                        </h5>
                        <span class="block mt-6 leading-4 text-sm font-medium"
                            >填写并提交表格,
                            顾问将在1个工作日内联系您提供合适的试用方案</span
                        >
                        <div class="flex flex-col mt-10">
                            <div class="flex flex-col gap-y-2">
                                <span class="px-2 py-3 rounded bg-gray-100/80">
                                    <input
                                        class="leading-4 text-sm font-medium outline-none bg-transparent"
                                        type="text"
                                        name="name"
                                        placeholder="怎么称呼您"
                                    />
                                </span>
                                <span class="px-2 py-3 rounded bg-gray-100/80">
                                    <input
                                        class="leading-4 text-sm font-medium outline-none bg-transparent"
                                        type="text"
                                        name="phone"
                                        placeholder="怎么称呼您"
                                    />
                                </span>
                                <span class="px-2 py-3 rounded bg-gray-100/80">
                                    <input
                                        class="leading-4 text-sm font-medium outline-none bg-transparent"
                                        type="text"
                                        name="firm"
                                        placeholder="您的企业叫什么"
                                    />
                                </span>
                                <span class="px-2 py-3 rounded bg-gray-100/80">
                                    <input
                                        class="leading-4 text-sm font-medium outline-none bg-transparent"
                                        type="text"
                                        name="product"
                                        placeholder="您主要做什么产品"
                                    />
                                </span>
                                <span class="px-2 py-3 rounded bg-gray-100/80">
                                    <textarea
                                        class="leading-4 text-sm font-medium outline-none bg-transparent w-full"
                                        name="product"
                                        id="product"
                                        rows="6"
                                        placeholder="您主要做什么产品"
                                    ></textarea>
                                </span>
                            </div>
                            <div class="flex flex-col mt-6 space-y-4">
                                <span>您当前是做什么？</span>
                                <div class="inline-flex gap-12">
                                    <span class="flex items-center space-x-1">
                                        <input
                                            class="w-4 h-4"
                                            type="checkbox"
                                            name="type"
                                            value="basketball"
                                            :checked="false"
                                        />
                                        <label
                                            class="leading-4 text-sm font-medium"
                                            for="type"
                                        >
                                            我是销售门店
                                        </label>
                                    </span>
                                    <span class="flex items-center space-x-1">
                                        <input
                                            class="w-4 h-4"
                                            type="checkbox"
                                            name="type"
                                            value="basketball"
                                            :checked="false"
                                        />
                                        <label
                                            class="leading-4 text-sm font-medium"
                                            for="type"
                                            >我是生产工厂</label
                                        >
                                    </span>
                                </div>
                            </div>

                            <ul class="grid grid-cols-3 gap-2 mt-6">
                                <template
                                    v-for="item in [
                                        { label: '我自己生产', value: '1' },
                                        { label: '线下门店卖货', value: '2' },
                                        { label: '为网店供货', value: '3' },
                                        { label: '拥有全国代理商', value: '4' },
                                        { label: '我有自己的电商', value: '5' },
                                        { label: '主要做本地市场', value: '6' },
                                    ]"
                                >
                                    <li
                                        class="px-11 py-2 rounded bg-gray-100/80 select-none"
                                    >
                                        <span
                                            class="leading-4 text-sm font-medium text-gray-600"
                                            >{{ item.label }}</span
                                        >
                                    </li>
                                </template>
                            </ul>
                            <span
                                class="block mx-auto mt-9 px-20 py-4 w-fit leading-4 text-sm font-medium text-white rounded-[3.25rem] bg-gradient-to-r from-[#6CF8D5] to-[#34C666] cursor-pointer"
                                >立刻体验</span
                            >
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="fixed inset-y-0 right-0 my-auto h-fit z-[998]">
            <ul class="flex flex-col gap-y-4">
                <li
                    class="relative shadow-lg shadow-slate-200 cursor-pointer group"
                >
                    <div
                        class="flex flex-col items-center justify-center text-white rounded bg-[#30C05D] leading-5 w-[4.375rem] h-[10.625rem]"
                    >
                        <span>购</span>
                        <span>买</span>
                        <span>咨</span>
                        <span>询</span>
                    </div>

                    <div
                        class="absolute inset-y-0 right-0 p-1 bg-white size-[10.625rem] shadow-lg shadow-slate-300 rounded-md opacity-0 group-hover:opacity-100 group-hover:-translate-x-20 duration-300 origin-right z-10"
                    >
                        <img
                            class="w-full h-full"
                            src="@/assets/images/qr-contact.png"
                            alt=""
                        />
                    </div>
                </li>
                <li
                    class="relative shadow-lg shadow-slate-200 cursor-pointer group"
                >
                    <div
                        class="flex flex-col items-center justify-center rounded bg-white leading-5 size-[4.375rem] bg-[url('@/assets/icons/service.svg')] bg-no-repeat bg-[length:75%_75%] bg-center"
                    >
                        <!-- <span class="size-12">
                            <img
                                class="text-black"
                                src="@/assets/icons/service.svg"
                                alt=""
                            />
                        </span> -->
                    </div>
                    <div
                        class="absolute inset-y-0 right-0 px-4 py-2 space-y-1 bg-white w-80 h-fit shadow-lg shadow-slate-300 rounded-md opacity-0 group-hover:opacity-100 group-hover:-translate-x-20 duration-300 origin-right z-10"
                    >
                        <span class="block">
                            <strong class="text-base font-semibold">
                                工作日:
                            </strong>
                            <small class="text-sm mx-1">
                                每周一到周六 9:00--18:00
                            </small>
                        </span>
                        <span class="block">
                            <strong class="text-base font-semibold">
                                联系在线客服电话:
                            </strong>
                            <small class="text-sm mx-1">18762528494</small>
                        </span>
                        <span class="block">
                            <strong class="text-base font-semibold">
                                其余时间您可以QQ留言:
                            </strong>
                            <small class="text-sm mx-1">132456768</small>
                        </span>
                    </div>
                </li>
                <li
                    class="rounded overflow-hidden shadow-lg shadow-slate-200 cursor-pointer"
                >
                    <div
                        class="flex flex-col items-center justify-center bg-white leading-5 size-[4.375rem] bg-[url('@/assets/icons/top.svg')] bg-no-repeat bg-[length:75%_75%] bg-center"
                        @click="() => (y = 0)"
                    ></div>
                </li>
            </ul>
        </div>
        <PageFooter />
    </div>
</template>

<style scoped></style>
